<template>
  <div v-show="flag" class="shop">
      <div @click="showCart" class="top">
      </div>
      <div class="content">
          <div class="toubu">
              <span>购物车</span>
              <span>清空</span>
          </div>
        <div class="foodbox">
              <div class="food">
              <span>莲子核桃黑米粥</span>
              <div class="num"><span>￥</span><span>10</span></div>
          </div>
           <div class="food">
              <span>莲子核桃黑米粥</span>
              <div class="num"><span>￥</span><span>10</span></div>
          </div>
           <div class="food">
              <span>莲子核桃黑米粥</span>
              <div class="num"><span>￥</span><span>10</span></div>
          </div>
           <div class="food">
              <span>莲子核桃黑米粥</span>
              <div class="num"><span>￥</span><span>10</span></div>
          </div>
           <div class="food">
              <span>莲子核桃黑米粥</span>
              <div class="num"><span>￥</span><span>10</span></div>
          </div>
           <div class="food">
              <span>莲子核桃黑米粥</span>
              <div class="num"><span>￥</span><span>10</span></div>
          </div>
           <div class="food">
              <span>莲子核桃黑米粥</span>
              <div class="num"><span>￥</span><span>10</span></div>
          </div>
           <div class="food">
              <span>莲子核桃黑米粥</span>
              <div class="num"><span>￥</span><span>10</span></div>
          </div>
           <div class="food">
              <span>莲子核桃黑米粥</span>
              <div class="num"><span>￥</span><span>10</span></div>
          </div>
           <div class="food">
              <span>莲子核桃黑米粥</span>
              <div class="num"><span>￥</span><span>10</span></div>
          </div>
          
      </div>
      
        </div>
  </div>
</template>

<script>

export default {
   data(){
    return{
        flag:false
    }
  },
  methods:{
    showCart(){
      this.flag=false;
    }
  }
}
</script>

<style lang="stylus" scoped>
w=100%; s1=24px; s2=28px; s3=32px; c=rgb(255,255,255);dw = 50%;
.shop{
    width:w;
    height: w;
    background-color : rgba(7,17,27,0.6);
    backdrop-filter: blur(0.13333rem);
    display: flex;
    flex-direction: column;
    position: fixed;
    top:-1rem;
}
.shop>.top{
    width: w;
    flex: 1;
    
}
.content{
    width: w;
    background-color c;
    max-height: 400px;
    overflow hidden;
}
.toubu{
    width: w;
    height: 80px
    background-color: #f3f5f7;
    line-height: 80px
    padding: 0px 36px
    border-bottom: 1px solid rgba(7,17,27,.1)
    
}
.toubu>span:nth-of-type(1){
    font-size: s2;
    font-weight: 200;
    color: rgb(7,17,27)
    float left
}
.toubu>span:nth-of-type(2){
    font-size: s1;
    color: rgb(0,160,200)
    float: right
}
.food{
    width :w;
    height 96px;
    border-bottom: 1px solid rgba(7,17,27,.1)
     padding: 0px 36px

}
.foodbox{
    width :w;
    height :w;
    overflow: auto;
}
.food>span:nth-of-type(1){
    color: rgb(7,17,27)
    font-size: s2;
    line-height: 96px
    float left
}
.num{
    height 96px
    width 96px
    color: rgb(240,20,20)
    line-height: 96px
    float: right ;
}
.num>span:nth-of-type(1){
    font-weight: normal
    font-size: 20px;
}
.num>span:nth-of-type(2){
    font-weight: 700
    font-size: 28px;
}
</style>